<template>
	<view class="shop-car">
		<template v-if="list.length>0">
			<!-- 自定义导航栏 -->
			<uniNavBar title="购物车" :rightText="isNavBar?'完成':'编辑' " statusBar="true" @clickRight="isNavBar = !isNavBar">
			</uniNavBar>
			<!-- 自定义导航栏 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index">
					<label class="radio" @tap="selectItem(index)">
						<radio color="#FF3333" :checked="item.checked"></radio>
						<text></text>
					</label>
					<image class="shop-img" :src="item.goods_small_logo"></image>
					<view class="shop-text">
						<view class="shop-name">
							{{item.goods_name}}
						</view>
						<view class="shop-color f-color">
							{{item.goods_name}}
						</view>
						<view class="shop-price">
							<view>
								${{item.goods_price}}
							</view>
							<template v-if="!isNavBar">
								<view>
									x{{item.num}}
								</view>
							</template>

							<template v-else>
								<uniNumberBox :value="item.num" min="1" @change="changeNum($event,index)">

								</uniNumberBox>
							</template>

						</view>
					</view>
				</view>
			</view>

			<!-- 底部结算 -->
			<view class="shop-foot">
				<label class="radio foot-radio" @tap="checkedAllFn">
					<radio value="" color="#ff3333" :checked="checkedAll"><text>全选</text></radio>
				</label>

				<template v-if="!isNavBar">
					<view class="foot-total">
						<view class="foot-count">
							合计：¥<text class="f-active-color">{{totalCount.price}}</text>
						</view>
						<view class="foot-price">
							结算（{{totalCount.num}})
						</view>
					</view>
				</template>

				<template v-else>
					<view class="foot-total">
						<view class="foot-price" style="background-color: #000000;">
							移入收藏夹
						</view>
						<view class="foot-price" @tap="delGoodsFn">
							删除
						</view>
					</view>
				</template>

			</view>
		</template>
		<!--  -->

		<template v-else>
			<uniNavBar title="购物车" statusBar="true">
			</uniNavBar>
			<view class="shop-else-list">
				<text>囧～购物车还是空的</text>
			</view>
		</template>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import uniNumberBox from '../../components/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				isNavBar: false,
				// list:[]
			}
		},

		computed: {
			...mapState({
				list: state => state.shopcar.list
			}),
			...mapGetters(['checkedAll', 'totalCount'])
		},
		methods: {
			// checkedAllFn(){
			// 	 this.$store.dispatch('checkedAllFn');
			// },
			...mapActions(['checkedAllFn', 'delGoodsFn']),
			...mapMutations(['selectItem']),
			changeNum(value, index) {
				this.list[index].num = value
			}
		},
		components: {
			uniNavBar,
			uniNumberBox
		},
		// mounted() {
		// 	console.log(77777,this.list)
		// }
	}
</script>

<style scoped>
	.shop-list {
		padding-bottom: 100rpx;
	}

	.shop-else-list {
		/* background-color: #f7f7f7; */
		width: 100%;
		margin-top: 50%;
		/* height: 100%; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.foot-total {
		display: flex;
	}

	.foot-price {
		border-radius: 80rpx;
		background-color: #49bdfb;
		color: #ffffff;
		padding: 0 60rpx;
		line-height: 100rpx;
	}

	.foot-count {
		line-height: 100rpx;
		padding: 0 20rpx;
	}

	.foot-radio {
		padding-left: 20rpx;
	}

	.shop-foot {
		background-color: #ffffff;
		border-top: 2rpx solid #f7f7f7;
		position: fixed;
		bottom: 94rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.shop-color {
		font-size: 24rpx;

	}

	.shop-item {
		display: flex;
		padding: 20rpx;
		/* //垂直剧中 */
		align-items: center;
		background-color: #f7f7f7;
		margin-bottom: 10rpx;
	}

	.shop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-text {
		flex: 1;
		padding-left: 20rpx;
	}
</style>
